<html>
    <head>
        <meta charset="UTF-8">
        <title>Main</title>
        <link href = "roomManagement.css" rel="stylesheet" type="text/css">
        </style>
    </head>
    <body>
        
        <div id="roomManagement">
            
            <div id="topbar">
                <div id="logo"></div>
                <div id="welcome">
                    <p id="logotxt">酒店管理系统</p>
                    <p id="welcomeTo">Welcome to check in to our hotel!</p>
                  </div>
                <div id="time">
                    <p id="timeText"></p>
                </div>
                <div id="account">
                    <img src="account.png">
                </div>
            </div>
            <div id="mainbar">
                <div class="optionbar-container">
                    <div id="optionbar">
                        <input type="button" value="客房管理" id="room" onclick="displayroom()"/>
                        <input type="button" value="用户信息" id="customer" onclick="displaycustomer()"/>
                    </div>
                </div>
                <div class="functionbar-container">
                    <div id="functionbar">
                        <div id="room-frame">
                            <button id="101" value="available" onclick="clickRoom(this)">101</button>
                            <button id="102" value="available" onclick="clickRoom(this)">102</button>
                            <button id="103" value="available" onclick="clickRoom(this)">103</button>
                            <button id="104" value="available" onclick="clickRoom(this)">104</button>
                            <button id="105" value="available" onclick="clickRoom(this)">105</button>
                            <button id="106" value="available" onclick="clickRoom(this)">106</button>
                            <button id="107" value="available" onclick="clickRoom(this)">107</button>
                            <button id="108" value="available" onclick="clickRoom(this)">108</button>
                            <button id="109" value="available" onclick="clickRoom(this)">109</button>
                            <button id="110" value="available" onclick="clickRoom(this)">110</button>
                            <button id="201" value="available" onclick="clickRoom(this)">201</button>
                            <button id="202" value="available" onclick="clickRoom(this)">202</button>
                            <button id="203" value="available" onclick="clickRoom(this)">203</button>
                            <button id="204" value="available" onclick="clickRoom(this)">204</button>
                            <button id="205" value="available" onclick="clickRoom(this)">205</button>
                            <button id="206" value="available" onclick="clickRoom(this)">206</button>
                            <button id="207" value="available" onclick="clickRoom(this)">207</button>
                            <button id="208" value="available" onclick="clickRoom(this)">208</button>
                            <button id="209" value="available" onclick="clickRoom(this)">209</button>
                            <button id="210" value="available" onclick="clickRoom(this)">210</button>
                            <button id="301" value="available" onclick="clickRoom(this)">301</button>
                            <button id="302" value="available" onclick="clickRoom(this)">302</button>
                            <button id="303" value="available" onclick="clickRoom(this)">303</button>
                            <button id="304" value="available" onclick="clickRoom(this)">304</button>
                            <button id="305" value="available" onclick="clickRoom(this)">305</button>
                            <button id="306" value="available" onclick="clickRoom(this)">306</button>
                            <button id="307" value="available" onclick="clickRoom(this)">307</button>
                            <button id="308" value="available" onclick="clickRoom(this)">308</button>
                            <button id="309" value="available" onclick="clickRoom(this)">309</button>
                            <button id="310" value="available" onclick="clickRoom(this)">310</button>
                        </div>
                        <div id="customer-frame">
                            <table id="customers">
                                <tr>
                                    <th>房间号</th>
                                    <th>姓名</th>
                                    <th>性别</th>
                                    <th>身份证号</th>
                                </tr>
                                <tr>
                                    <td>101</td>
                                    <td id="101name"></td>
                                    <td id="101sex"></td>
                                    <td id="101idNumber"></td>
                                </tr>
                                <tr>
                                    <td>102</td>
                                    <td id="102name"></td>
                                    <td id="102sex"></td>
                                    <td id="102idNumber"></td>
                                </tr>
                                <tr>
                                    <td>103</td>
                                    <td id="103name"></td>
                                    <td id="103sex"></td>
                                    <td id="103idNumber"></td>
                                </tr>
                                <tr>
                                    <td>104</td>
                                    <td id="104name"></td>
                                    <td id="104sex"></td>
                                    <td id="104idNumber"></td>
                                </tr>
                                <tr>
                                    <td>105</td>
                                    <td id="105name"></td>
                                    <td id="105sex"></td>
                                    <td id="105idNumber"></td>
                                </tr>
                                <tr>
                                    <td>106</td>
                                    <td id="106name"></td>
                                    <td id="106sex"></td>
                                    <td id="106idNumber"></td>
                                </tr>
                                <tr>
                                    <td>107</td>
                                    <td id="107name"></td>
                                    <td id="107sex"></td>
                                    <td id="107idNumber"></td>
                                </tr>
                                <tr>
                                    <td>108</td>
                                    <td id="108name"></td>
                                    <td id="108sex"></td>
                                    <td id="108idNumber"></td>
                                </tr>
                                <tr>
                                    <td>109</td>
                                    <td id="109name"></td>
                                    <td id="109sex"></td>
                                    <td id="109idNumber"></td>
                                </tr>
                                <tr>
                                    <td>110</td>
                                    <td id="110name"></td>
                                    <td id="110sex"></td>
                                    <td id="110idNumber"></td>
                                </tr>
                                <tr>
                                    <td>201</td>
                                    <td id="201name"></td>
                                    <td id="201sex"></td>
                                    <td id="201idNumber"></td>
                                </tr>
                                <tr>
                                    <td>202</td>
                                    <td id="202name"></td>
                                    <td id="202sex"></td>
                                    <td id="202idNumber"></td>
                                </tr>
                                <tr>
                                    <td>203</td>
                                    <td id="203name"></td>
                                    <td id="203sex"></td>
                                    <td id="203idNumber"></td>
                                </tr>
                                <tr>
                                    <td>204</td>
                                    <td id="204name"></td>
                                    <td id="204sex"></td>
                                    <td id="204idNumber"></td>
                                </tr>
                                <tr>
                                    <td>205</td>
                                    <td id="205name"></td>
                                    <td id="205sex"></td>
                                    <td id="205idNumber"></td>
                                </tr>
                                <tr>
                                    <td>206</td>
                                    <td id="206name"></td>
                                    <td id="206sex"></td>
                                    <td id="206idNumber"></td>
                                </tr>
                                <tr>
                                    <td>207</td>
                                    <td id="207name"></td>
                                    <td id="207sex"></td>
                                    <td id="207idNumber"></td>
                                </tr>
                                <tr>
                                    <td>208</td>
                                    <td id="208name"></td>
                                    <td id="208sex"></td>
                                    <td id="208idNumber"></td>
                                </tr>
                                <tr>
                                    <td>209</td>
                                    <td id="209name"></td>
                                    <td id="209sex"></td>
                                    <td id="209idNumber"></td>
                                </tr>
                                <tr>
                                    <td>210</td>
                                    <td id="201name"></td>
                                    <td id="210sex"></td>
                                    <td id="210idNumber"></td>
                                </tr>
                                <tr>
                                    <td>301</td>
                                    <td id="301name"></td>
                                    <td id="301sex"></td>
                                    <td id="301idNumber"></td>
                                </tr>
                                <tr>
                                    <td>302</td>
                                    <td id="302name"></td>
                                    <td id="302sex"></td>
                                    <td id="302idNumber"></td>
                                </tr>
                                <tr>
                                    <td>303</td>
                                    <td id="303name"></td>
                                    <td id="303sex"></td>
                                    <td id="303idNumber"></td>
                                </tr>
                                <tr>
                                    <td>304</td>
                                    <td id="304name"></td>
                                    <td id="304sex"></td>
                                    <td id="304idNumber"></td>
                                </tr>
                                <tr>
                                    <td>305</td>
                                    <td id="305name"></td>
                                    <td id="305sex"></td>
                                    <td id="305idNumber"></td>
                                </tr>
                                <tr>
                                    <td>306</td>
                                    <td id="306name"></td>
                                    <td id="306sex"></td>
                                    <td id="306idNumber"></td>
                                </tr>
                                <tr>
                                    <td>307</td>
                                    <td id="307name"></td>
                                    <td id="307sex"></td>
                                    <td id="307idNumber"></td>
                                </tr>
                                <tr>
                                    <td>308</td>
                                    <td id="308name"></td>
                                    <td id="308sex"></td>
                                    <td id="308idNumber"></td>
                                </tr>
                                <tr>
                                    <td>309</td>
                                    <td id="309name"></td>
                                    <td id="309sex"></td>
                                    <td id="309idNumber"></td>
                                </tr>
                                <tr>
                                    <td>310</td>
                                    <td id="310name"></td>
                                    <td id="310sex"></td>
                                    <td id="310idNumber"></td>
                                </tr>
                                
                              
                            </table>
                        </div>

                    </div>
                </div>
                <div id="askForEmptyRoom" class="popups">
                    <p class="tips">请选择服务</p>
                    <button onclick="checkin()" class="option1">入住</button>
                    <button onclick="whetherSetRoomFixed()" class="option2">房间维修</button>
                    <button class="closeBtn"  onclick="cancel()">X</button>
                </div>
                <div id="askForOccupiedRoom" class="popups">
                    <p class="tips">请选择服务</p>
                    <button  class="option1" onclick="whetherCheckout()">退房</button>
                    <button  class="option2" onclick="whetherSetRoomFixed()">房间维修</button> 
                    <button class="closeBtn" onclick="cancel()">X</button>                
                </div>
                <div id="checkin" class="popups">
                    <!-- 登记框标题 -->
                    <p class="tips">请输入信息</p>
                    <button class="closeBtn" onclick="cancel()">X</button>
                    <!-- 登记框表单 -->
                    <div class="register-form">
                        <div class="register-input">
                            <label>姓名：</label>
                            <input type="text" placeholder="请输入用户姓名" class="list-input" id="nameInput"/>
                        </div>

                        <div class="register-input">
                            <label>身份证号：</label>
                            <input type="text" placeholder="请输入用户身份证号" class="list-input" id="idNumberInput"/>
                        </div>
              
                    </div>
                    <!-- 登记框登陆按钮 -->
                    <button type="submit"  id="registerSubmit"  class="registerSubmit" onclick="checkinDone()">确认入住</button>
                </div>
                <div id="checkout" class="popups">
                    <p class="tips">确定退房吗？</p>
                    <button  class="option1" onclick="checkout()">确定</button>
                    <button  class="option2" onclick="cancel()">取消</button>
                    <button class="closeBtn" onclick="cancel()">X</button>
                </div>
                <div id="changeRoom" class="popups">
                    <!-- 登记框标题 -->
                    <p class="tips" id="changeTips">该房间有人！要把房客移入：</p>
                    <button class="closeBtn" onclick="cancel()">X</button>
                    <!-- 登记框表单 -->
                    <div class="register-form">
                        <div class="register-input">
                            <label>房间号：</label>
                            <input type="text" placeholder="请输入空闲房间号" class="list-input" id="newRoomInput"/>
                        </div>
              
                    </div>
                    <!-- 登记框登陆按钮 -->
                    <button type="submit"  id="changeSubmit"  class="registerSubmit" onclick="changeRoom()">确认更改</button>
                </div>
                <div id="bg">sada</div>
            </div> 
        </div>
        <script type="text/javascript" src="roommanagement.js" defer=true>
        </script>
        
    </body>
</html>